<template>
    <div class="register-container">
        <div class="register-content">
            <div class="register-header">
                <div class="logo-container">
                    <div class="logo-icon">
                        <el-icon size="32"><Monitor /></el-icon>
                    </div>
                    <h1>数据分析平台</h1>
                </div>
                <p class="subtitle">开启您的数据分析之旅</p>
            </div>
            
            <el-card class="register-card" shadow="never">
                <h2>注册账号</h2>
                <p class="welcome-text">填写以下信息创建您的账号</p>
                
                <el-form 
                    :model="registerForm" 
                    :rules="rules" 
                    ref="registerFormRef" 
                    class="register-form"
                    @submit.prevent="handleRegister"
                >
                    <el-form-item prop="username">
                        <el-input
                            v-model="registerForm.username"
                            placeholder="用户名"
                            size="large"
                        >
                            <template #prefix>
                                <el-icon><User /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="email">
                        <el-input
                            v-model="registerForm.email"
                            placeholder="邮箱"
                            size="large"
                        >
                            <template #prefix>
                                <el-icon><Message /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="password">
                        <el-input
                            v-model="registerForm.password"
                            type="password"
                            placeholder="密码"
                            show-password
                            size="large"
                        >
                            <template #prefix>
                                <el-icon><Lock /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="confirmPassword">
                        <el-input
                            v-model="registerForm.confirmPassword"
                            type="password"
                            placeholder="确认密码"
                            show-password
                            size="large"
                        >
                            <template #prefix>
                                <el-icon><Lock /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="phone">
                        <el-input
                            v-model="registerForm.phone"
                            placeholder="手机号码（选填）"
                            size="large"
                        >
                            <template #prefix>
                                <el-icon><Iphone /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item prop="organization">
                        <el-input
                            v-model="registerForm.organization"
                            placeholder="组织机构（选填）"
                            size="large"
                        >
                            <template #prefix>
                                <el-icon><School /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    
                    <el-form-item class="agreement">
                        <el-checkbox v-model="agreeTerms">
                            我已阅读并同意
                            <a href="#" class="link">服务条款</a>
                            和
                            <a href="#" class="link">隐私政策</a>
                        </el-checkbox>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button 
                            type="primary" 
                            :loading="loading" 
                            @click="handleRegister" 
                            class="register-button"
                            size="large"
                            :disabled="!agreeTerms"
                        >
                            注册
                        </el-button>
                    </el-form-item>
                </el-form>
                
                <div class="login-link">
                    已有账号？
                    <router-link to="/login" class="link">立即登录</router-link>
                </div>
            </el-card>
        </div>
        
        <div class="register-footer">
            <p>© 2024 数据分析平台 版权所有</p>
        </div>
        
        <!-- 背景动画 -->
        <div class="area">
            <ul class="circles">
                <li v-for="n in 10" :key="n"></li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const { User, Lock, Message, Iphone, School, Monitor } = ElementPlusIconsVue

const store = useStore()
const router = useRouter()
const registerFormRef = ref(null)
const loading = ref(false)
const agreeTerms = ref(false)

const registerForm = reactive({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
    phone: '',
    organization: ''
})

const validatePass = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        if (registerForm.confirmPassword !== '') {
            registerFormRef.value?.validateField('confirmPassword')
        }
        callback()
    }
}

const validatePass2 = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerForm.password) {
        callback(new Error('两次输入密码不一致!'))
    } else {
        callback()
    }
}

const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, message: '用户名长度至少为3个字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    password: [
        { required: true, validator: validatePass, trigger: 'blur' },
        { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, validator: validatePass2, trigger: 'blur' }
    ],
    phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
}

const handleRegister = async () => {
    if (!registerFormRef.value) return
    
    try {
        await registerFormRef.value.validate()
        loading.value = true
        
        const { confirmPassword, ...registerData } = registerForm
        await store.dispatch('register', registerData)
        ElMessage.success('注册成功')
        router.push('/login')
    } catch (error) {
        console.error('注册失败:', error)
        ElMessage.error(error.response?.data?.detail || '注册失败，请检查输入信息')
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.register-container {
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
    position: relative;
    overflow: hidden;
}

.register-content {
    width: min(90%, 480px);
    position: relative;
    z-index: 1;
}

.register-header {
    text-align: center;
    margin-bottom: 40px;
    color: #fff;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.logo-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-header h1 {
    margin: 0;
    font-size: clamp(24px, 5vw, 28px);
    font-weight: 600;
}

.subtitle {
    margin: 0;
    font-size: clamp(14px, 3vw, 16px);
    opacity: 0.8;
}

.register-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: clamp(20px, 5vw, 40px);
    box-shadow: 0 8px 32px rgba(0, 21, 41, 0.08);
    width: 100%;
}

.register-card h2 {
    margin: 0 0 8px;
    font-size: clamp(20px, 4vw, 24px);
    color: #1f2329;
}

.welcome-text {
    margin: 0 0 32px;
    color: #86909c;
}

.register-form {
    margin-bottom: 24px;
}

.register-button {
    width: 100%;
    height: 44px;
    font-size: 16px;
    background: linear-gradient(90deg, #1890ff 0%, #36cfc9 100%);
    border: none;
}

.register-button:disabled {
    background: #e5e6eb;
    color: #86909c;
}

.agreement {
    margin-bottom: 24px;
}

.login-link {
    text-align: center;
    font-size: 14px;
    color: #86909c;
}

.link {
    color: #1890ff;
    text-decoration: none;
    margin-left: 4px;
}

.register-footer {
    position: absolute;
    bottom: 24px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

/* 背景动画 */
.area {
    position: absolute;
    width: 100%;
    height: 100%;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    border-radius: 50%;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
    .register-content {
        width: 90%;
    }
    
    .register-card {
        padding: 20px;
    }
    
    .agreement {
        margin-bottom: 16px;
    }
}
</style> 